<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  canvas {
    border: 1px solid #ccc;
  
  }
</style>
<canvas id="canvas" width="500" height="500"></canvas>
<!-- 顶点着色器 -->
<script id="vertex-shader" type="x-shader/x-vertex">
   void main(){
    gl_PointSize = 10.0;
    gl_Position = vec4(0.0,0.0,0.0,1.0);  
   }
</script>
<!-- 片段着色器 -->
<script id="fragment-shader" type="x-shader/x-fragment">
  void main(){
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  }
</script>
<script>
  const canvas = document.getElementById('canvas');
  const gl = canvas.getContext('webgl');
  //创建着色器和片元着色器
  const vertextShader = gl.createShader(gl.VERTEX_SHADER);
  const framentShader = gl.createShader(gl.FRAGMENT_SHADER);
  //获取着色器源码
  const vertexSource = document.getElementById('vertex-shader').innerText;
  const fragmentSorce = document.getElementById('fragment-shader').innerText;
  //绑定着色器源码
  gl.shaderSource(vertextShader, vertexSource);
  gl.shaderSource(framentShader, fragmentSorce);
  //编译着色器源码
  gl.compileShader(vertextShader);
  gl.compileShader(framentShader);
  //创建程序对象
  const program = gl.createProgram();
  //绑定着色器到程序对象
  gl.attachShader(program, vertextShader);
  gl.attachShader(program, framentShader);
  //链接程序对象
  gl.linkProgram(program);
  //使用程序对象
  gl.useProgram(program);
  gl.drawArrays(gl.POINTS, 0, 1)

</script>

<body>

</body>

</html>